import { Modal } from "antd-mobile";
import { attachPropsToComponent } from "./utils";
import type { GreatJoyModalProps } from "./type";
import { useLayoutEffect } from "react";

// 将SCSS内容作为字符串导入
import styles from "./index.scss?inline";

// 用于跟踪样式是否已注入
let isStyleInjected = false;

/**
 * AntdModal组件 - 一个基于antd-mobile Modal的自定义模态框组件
 * @param props - GreatJoyModalProps类型的组件属性
 * @param props.className - 自定义类名
 * @param props.content - 模态框内容
 * @param props.confirmText - 确认按钮文本，默认为"确认"
 * @param props.cancelText - 取消按钮文本，默认为"取消"
 * @param props.onConfirm - 确认按钮点击回调函数
 * @param props.onCancel - 取消按钮点击回调函数
 * @param otherProps - 其他传递给Modal组件的属性
 */
const AntdModal = ({
	className,
	content,
	confirmText = "确认",
	cancelText = "取消",
	onConfirm,
	onCancel,
	...otherProps
}: GreatJoyModalProps) => {
	// 使用 useLayoutEffect 确保样式在DOM渲染前注入
	useLayoutEffect(() => {
		// 如果样式已注入，则直接返回
		if (isStyleInjected) return;

		// 创建样式元素并注入
		const styleElement = document.createElement("style");
		styleElement.innerHTML = styles;
		styleElement.setAttribute("data-greatjoy-modal-styles", "");
		document.head.appendChild(styleElement);
		
		// 标记样式已注入
		isStyleInjected = true;

		// 清理函数，在组件卸载时不会移除样式，因为可能还有其他实例在使用
		return () => {};
	}, []);

	return (
		<Modal
			{...otherProps}
			className={`${className} greatjoy-modal-wrapper GreatJoyModal`}
			content={
				<>
					{/* 内容区 */}
					<div className="GreatJoyModal-content">{content}</div>
					{/* 底部按钮 */}
					{(confirmText || cancelText) && (
						<div className="GreatJoyModal-footer">
							{cancelText && (
								<div className="footer-btn footer-cancel" onClick={onCancel}>
									{cancelText}
								</div>
							)}
							{confirmText && (
								<div className="footer-btn footer-confirm" onClick={onConfirm}>
									{confirmText}
								</div>
							)}
						</div>
					)}
				</>
			}
			actions={[]}></Modal>
	);
};

/**
 * GreatJoyModal组件 - 带有附加show方法的模态框组件
 * @param props - GreatJoyModalProps类型的组件属性
 * @param props.className - 自定义类名
 * @param props.content - 模态框内容
 * @param props.icon - 模态框图标
 * @param props.confirmText - 确认按钮文本，默认为"确认"
 * @param props.cancelText - 取消按钮文本，默认为"取消"
 * @param props.onConfirm - 确认按钮点击回调函数
 * @param props.onCancel - 取消按钮点击回调函数
 * @param otherProps - 其他传递给Modal组件的属性
 */
const GreatJoyModal = attachPropsToComponent(AntdModal, {
	/**
	 * 声明式显示模态框的方法
	 */
	show: ({
		className,
		content,
		icon,
		confirmText = "确认",
		cancelText = "取消",
		onConfirm,
		onCancel,
		...otherProps
	}: GreatJoyModalProps) => {
		// 注入样式到页面中
		if (!isStyleInjected) {
			const styleElement = document.createElement("style");
			styleElement.innerHTML = styles;
			styleElement.setAttribute("data-greatjoy-modal-styles", "");
			document.head.appendChild(styleElement);
			isStyleInjected = true;
		}

		const modalShow = Modal.show({
			...otherProps,
			className: `${className} greatjoy-modal-wrapper GreatJoyModal`,
			content: (
				<>
					{/* 内容区 */}
					<div className="GreatJoyModal-content">
						{icon && <div style={{ marginRight: 4 }}>{icon}</div>}
						{content}
					</div>
					{/* 底部按钮 */}
					{(confirmText || cancelText) && (
						<div className="GreatJoyModal-footer">
							{cancelText && (
								<div
									className="footer-btn footer-cancel"
									onClick={() => {
										modalShow.close();
										onCancel && onCancel();
									}}>
									{cancelText}
								</div>
							)}
							{confirmText && (
								<div
									className="footer-btn footer-confirm"
									onClick={() => {
										modalShow.close();
										onConfirm && onConfirm();
									}}>
									{confirmText}
								</div>
							)}
						</div>
					)}
				</>
			),
			actions: [],
		});
	},
});

export { GreatJoyModal };
